<template>
  <div>
    <div class="flex h-96 w-full flex-row">
      <div class="h-96 w-[520px]">
        <Title text="封板成功率：">
          <span :class="emotionList.up_ratio > 0.7 ? 'text-red-500' : 'text-green-600'">{{ (emotionList.up_ratio * 100).toFixed() }}%</span>
        </Title>
        <div class="flex h-36 w-full flex-row space-x-2 bg-white">
          <div class="h-36 w-5/12 pl-2">
            <Gauge :degree="parseInt(emotionList.market_degree * 100)"></Gauge>
          </div>
          <div class="h-36 w-7/12">
            <div id="fenbuChart" class="h-32 w-full"></div>
            <div class="mx-4 h-2" v-if="list.up_down_dis">
              <div class="flex h-2 w-full space-x-2">
                <div
                  class="bg-red-500"
                  :style="{
                    width: (list.up_down_dis.rise_num * 100) / (list.up_down_dis.rise_num + list.up_down_dis.fall_num + list.up_down_dis.flat_num) + '%',
                  }"
                ></div>
                <div
                  class="bg-gray-300"
                  :style="{
                    width: (list.up_down_dis.flat_num * 100) / (list.up_down_dis.rise_num + list.up_down_dis.fall_num + list.up_down_dis.flat_num) + '%',
                  }"
                ></div>
                <div
                  class="bg-green-600"
                  :style="{
                    width: (list.up_down_dis.fall_num * 100) / (list.up_down_dis.rise_num + list.up_down_dis.fall_num + list.up_down_dis.flat_num) + '%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-2 w-full">
          <HotPlate ref="hotplate"></HotPlate>
        </div>
      </div>
      <div class="mx-2 h-96 w-full">
        <div class="flex h-64 w-full flex-row justify-start">
          <div class="basis-1/4 bg-white">
            <Title text="北向流入: ">
              <template v-if="emotionList.fundTotal">
                <span :class="emotionList.fundTotal > 0 ? 'text-red-500' : 'text-green-600'">
                  {{ Utils.bigNumberTransform(emotionList.fundTotal, 'type') }}
                </span>
              </template>
            </Title>
            <div id="fundChart" class="w-full h-52"></div>
          </div>
          <div class="mx-2 flex basis-14 flex-col justify-between text-center">
            <template v-for="(item, index) in list.index_quote" :key="item.secu_code">
              <template v-if="index < 4">
                <div class="h-14 w-14 cursor-pointer text-white" @click="changeCode(item)" :class="item.change > 0 ? 'bg-red-500' : 'bg-green-600'">
                  <div v-if="item.secu_code == 'sh000001'">沪</div>
                  <div v-else-if="item.secu_code == 'sz399001'">深</div>
                  <div v-else-if="item.secu_code == 'sz399006'">创</div>
                  <div v-else-if="item.secu_code == 'sh000688'">科</div>
                  <div class="text-sm font-semibold">{{ (item.change * 100).toFixed(2) }}%</div>
                </div>
              </template>
            </template>
          </div>
          <div class="mr-2 flex-auto bg-white">
            <ZhishuLine ref="zhishuline" :code="select_code" :title="select_title"></ZhishuLine>
          </div>
          <div class="basis-1/4 overflow-y-auto">
            <Message ref="message" />
          </div>
        </div>
        <Plate ref="plate" />
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios';
import echarts from '../utils/echarts';
import Utils from '../utils/index';
import { ref, onMounted, onBeforeMount } from 'vue';
const message = ref(null);

const list = ref([]);
const select_code = ref('000001.SS');
const select_title = ref('上证指数');

const emotionList = ref([]);
let barChart = '';

let fundLineChart = '';
const fontSize = 10;

onMounted(() => {
  createChart();
  setTimeout(() => {
    barChart.resize();
    fundLineChart.resize();
  }, 1000);
  window.addEventListener('resize', () => {
    barChart.resize();
    fundLineChart.resize();
  });
});
onBeforeMount(() => {
  window.removeEventListener('resize', () => {
    console.log('removeEventListener');
  });
});
function changeCode(item) {
  select_code.value = Utils.formatCls(item.secu_code);
  select_title.value = item.secu_name;
  // zhishuline.value.fetchLine();
}
function createChart() {
  barChart = echarts.init(document.getElementById('fenbuChart'));
  fundLineChart = echarts.init(document.getElementById('fundChart'));
}

//财联社首页指标
function fetchLiang() {
  axios
    .get('https://x-quote.cls.cn/quote/stock/emotion_options?app=CailianpressWeb&fields=up_performance&os=web&sv=7.7.5&sign=5f473c4d9440e4722f5dc29950aa3597')
    .then(function (res) {
      let result = res.data.data;
      result.fundTotal = 0;
      if (result.HK2SH.length > 0) {
        let fundTotal = result.HK2SH[result.HK2SH.length - 1].fund + result.HK2SZ[result.HK2SZ.length - 1].fund;
        result.fundTotal = fundTotal;
      }
      window.localStorage.setItem('up_num', result.up_num);
      window.localStorage.setItem('up_open_num', result.up_open_num);
      window.localStorage.setItem('down_num', result.down_num);
      emotionList.value = result;
      renderFundLine();
    });
}

function renderFundLine() {
  let data = emotionList.value['HK2SH'].map((e, index) => {
    return e.fund + emotionList.value['HK2SZ'][index].fund;
  });

  let min = Math.min(...data);
  let max = Math.max(...data);
  let m = Math.abs(min) + Math.abs(max);

  let lineOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      valueFormatter: (value) => Utils.bigNumberTransform(value, 'type'),
    },
    xAxis: {
      type: 'category',
      data: Utils.creatX(true),
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: fontSize,
        interval: 0,
        formatter: function (value, index) {
          if (index == 15) {
            return '9:30';
          } else if (index == 70) {
            return '10:30';
          } else if (index == 135) {
            return '11:30/13:00';
          } else if (index == 195) {
            return '14:00';
          } else if (index == 255) {
            return '15:00';
          } else {
            return;
          }
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    yAxis: {
      min: -m,
      max: m,
      interval: m / 2,
      axisLabel: {
        fontSize: fontSize,
        formatter: function (value, index) {
          return Utils.bigNumberTransform(value, 'type', 0);
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
      },
    },
    grid: {
      top: 10,
      bottom: 20,
      left: '15%',
      right: '5%',
    },
    visualMap: {
      show: false,
      // dimension: 0,
      pieces: [
        {
          gt: -10000000000000,
          lte: 0,
          color: '#16a34a',
        },
        {
          gt: 0,
          color: '#ef4444',
        },
      ],
    },
    series: [
      {
        data: data,
        showSymbol: false,
        type: 'line',
      },
    ],
  };
  fundLineChart.setOption(lineOption);
}
const zhishuline = ref('');
const hotplate = ref('');
const plate = ref(null);
function fetchData() {
  //子组件方法
  message.value.fetchData();
  zhishuline.value.fetchData();
  hotplate.value.fetchData();
  plate.value.fetchData();
  fetchLiang();
  axios.get('https://x-quote.cls.cn/quote/index/home?app=CailianpressWeb&os=web&sv=7.7.5&sign=bf0f367462d8cd70917ba5eab3853bce').then(function (res) {
    let result = res.data.data;
    list.value = result;
    renderBar(res.data.data.up_down_dis);
  });
}

function renderBar(udJson) {
  let values = [];
  values.push(udJson['up_num'] || 0);
  values.push(udJson['up_10']);
  values.push(udJson['up_8']);
  values.push(udJson['up_6']);
  values.push(udJson['up_4']);
  values.push(udJson['up_2']);
  values.push(udJson['flat_num']);
  values.push(udJson['down_2']);
  values.push(udJson['down_4']);
  values.push(udJson['down_6']);
  values.push(udJson['down_8']);
  values.push(udJson['down_10']);
  values.push(udJson['down_num'] || 0);

  let barOption = {
    xAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },

      data: ['涨停', '+10%', '8%', '+6%', '+4%', '2%', '0%', '-2%', '-4%', '-6%', '-8%', '-10%', '跌停'],
    },
    yAxis: {
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    grid: {
      top: 10,
      bottom: 5,
      left: '5%',
      right: '5%',
    },
    series: [
      {
        data: values,
        type: 'bar',
        label: {
          show: true,
          fontSize: fontSize - 2,
          position: 'top',
        },
        itemStyle: {
          color: function (params) {
            if (params.dataIndex < 6) {
              return '#ef4444';
            } else if (params.dataIndex == 6) {
              return '#a3a3a3';
            } else {
              return '#16a34a';
            }
          },
        },
      },
    ],
  };
  barChart.setOption(barOption);
}
defineExpose({
  fetchData,
});
</script>
